<template>
  <div class="shop">
    <div class="header">
      <div class="h-img-div"><img :src="shopInfo.thumb" alt="" id="headimg" :onerror="errorImg01"></div>
      <div class="shop-info">
        <h1>{{shopInfo.name}}</h1>
        <span @click="changeStatus">{{shopStatusStr}}&nbsp;></span>
      </div>
    </div>
    <!--<div class="shop-menu">
              <div class="tab-item">
                <router-link to="">
                  <span class="icon iconfont icon-wenda"></span>
                  <p class="text">商品</p>
                </router-link>
              </div>
              <div class="tab-item">
                <router-link to="">
                  <span class="icon iconfont icon-faxian"></span>
                  <p class="text">评价</p>
                </router-link>
              </div>
              <div class="tab-item">
                <router-link to="">
                  <span class="icon iconfont icon-wode"></span>
                  <p class="text">财务</p>
                </router-link>
              </div>
              <div class="tab-item">
                <router-link to="">
                  <span class="icon iconfont icon-wode"></span>
                  <p class="text">配送</p>
                </router-link>
              </div>
          </div>
          -->
    <div class="wrapper" ref="askWrapper">
      <div class="content">
        <div class="shop-data">
          <div class="data-detail">
            <div class="data-cell">
              <h1>今日营业额</h1>
              <span>{{shopObj.today_money}}</span>
            </div>
            <div class="data-cell">
              <h1>今日订单数</h1>
              <span>{{shopObj.today_num}}</span>
            </div>
            <div class="data-cell">
              <h1>本月营业额</h1>
              <span>{{shopObj.month_money}}</span>
            </div>
          </div>
        </div>
        <div class="item">
          <mt-cell title="财务查询" to="/caiwu" is-link></mt-cell>
          <!-- <div class="select-date">
              <div class="date">开始日期: <input type="text" readonly placeholder="请选择日期" :value="startdate"
                                             @click="showCalendar(1)"></div>
              <div class="date">结束日期: <input type="text" readonly placeholder="请选择日期" :value="enddate"
                                             @click="showCalendar(2)"></div>

            </div>
            <mt-button type="default" @click="searchCW">查询</mt-button>
            <p class="p-je">总金额
              <span>￥{{zMoney}}</span>
            </p> -->
        </div>
        <div class="item">
          <mt-cell title="店铺设置" to="/shopsetting" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="配送费管理" to="/peisong" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="优惠券管理" to="/coupon" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="商品分类" to="/category" is-link></mt-cell>
        </div>
        <div class="item">
          <mt-cell title="餐桌管理" to="/desk" is-link></mt-cell>
        </div>
        <div class="item" ref="printset" id="diva">
          <mt-cell title="打印机管理" id="a" is-link></mt-cell>
        </div>
        <div class="dengc">
          <mt-button type="primary" @click="toexit">退出登录</mt-button>
        </div>
      </div>
    </div>
    <calendar :show="calendarShow" format="yyyy-MM-dd" @selected="selectedHandler"></calendar>

  </div>
</template>

<script>
import { exit, saveHeadimg } from 'common/js/localStorage.js'
import axios from 'axios'
import BScroll from 'better-scroll'
import { Toast } from 'mint-ui'
import Calendar from 'vue-m-calendar';
import selectPicker from 'components/common/selectPicker.vue'

export default {
  data() {
    return {
      errorImg01: 'this.src="' + require('../.././assets/img_tx.jpg') + '"',
      shopObj: '',
      shopInfo: '',
      startdate: '',
      enddate: '',
      status: '',
      value: '',
      calendarShow: false,
      shopStatus: true,
      shopStatusStr: '',
      zMoney: '0'
    }
  },
  mounted() {
    var vueself = this;
    //console.log( vueself.$refs.printset.style);

    mui.init({})
    //如果使用打印机，则初始化蓝牙设备以及打印机socket服务


    mui.plusReady(function() {

      /*****************************************************蓝牙基础类*******************************************/


      (function($, owner, util) {

        util.WaitFor = function(condition, callback, timeout, unitTime) {
          // 设置默认等待时间（循环间隔）
          if (!unitTime || isNaN(unitTime)) {
            unitTime = 100;
          }
          // 设置超时（到达超时则返回）
          if (!timeout || isNaN(timeout)) {
            timeout = 100;
          }
          if (condition && condition()) { // 等待条件成立，则执行回调
            callback();
          } else if (timeout - unitTime <= 0) { // 等待超时，则执行回调
            callback();
          } else { // 设置延时等待操作
            setTimeout(function() {
              util.WaitFor(condition, callback, timeout - unitTime, unitTime);
            }, unitTime);
          }
        };

        owner.OutputStream = null;

        owner.init = function(BluetoothSocket) {
          owner.OutputStream = BluetoothSocket.getOutputStream();
          plus.android.importClass(owner.OutputStream);
        }

        // 设置字体大小
        owner.SetFontSize = function(n) {
          var font = [0x1D, 0X21, n]
          owner.OutputStream.write(font);
        };

        // 打印字符串
        owner.PrintString = function(string) {
          var bytes = plus.android.invoke(string, 'getBytes', 'gbk');
          owner.OutputStream.write(bytes);
        };

        // 打印字符串
        owner.getbyteslen = function(string) {
          var bytes = plus.android.invoke(string, 'getBytes', 'gbk');
          return bytes.length;
        };

        // 重置打印机
        owner.Reset = function() {
          var reset = [0x1B, 0X40];
          owner.OutputStream.write(reset);
        };

        // 设置居中对齐
        owner.setCenter = function() {
          var reset = [0x1B, 0x61, 0x01];
          owner.OutputStream.write(reset);
        };
        // 设置左对齐
        owner.setLeft = function() {
          var reset = [0x1B, 0x61, 0x00];
          owner.OutputStream.write(reset);
        };
        // 设置右对齐
        owner.setRight = function() {
          var reset = [0x1B, 0x61, 0x02];
          owner.OutputStream.write(reset);
        };
        // 打印下划线
        owner.Underline = function() {
          // 下划线指令
          var underline = [0x1b, 0x2d, 0x01];
          owner.OutputStream.write(underline);
        };

        // 结束打印
        owner.End = function() {
          owner.OutputStream.flush();
          var end = [0x1d, 0x4c, 0x1f, 0x00];
          owner.OutputStream.write(end);
        };

        // 打印图片（暂不可用）
        owner.Picture = function() {
          var picture = [0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x1B, 0x40, 0x1B, 0x33, 0x00];
          // var picture = [0x1B, 0x2A];
          owner.OutputStream.write(picture);
        };

        // 切纸（暂不可用）
        owner.CutPage = function() {
          // 发送切纸指令
          var end = [0x1B, 0x69];
          owner.OutputStream.write(end);
        };
        // 条形码打印(暂不可用)
        owner.PrintBarcode = function(n) {
          var barcode = [0x1D, 0x6B, 65, 5, 11, 12, 3, 6, 23];
          owner.OutputStream.write(barcode);
        };
      }(mui, window.PrintUtil = {}, window.CommonUtil = {}))

      // 导入的java包
      var Context, BluetoothAdapter, BluetoothDevice;
      // 蓝牙服务与适配
      var BManager, BAdapter, BluetoothSocket, mDevice, receiver;
      var mMain, mUUID, UUID;

      var self = plus.webview.currentWebview();
      var use_printer = localStorage.getItem("use_printer");
      if (use_printer == 'y') {
        vueself.$refs.printset.style.setProperty("display", "block");


        // 打开蓝牙设备并扫描
        if (mui.os.android) {
          // 打开蓝牙
          openAndroidBluetooth();
        }


        /************************************初始化socket*******************************/
        // 连接服务端
        var socket = io(SOCKET_HOST);
        // 连接后登录
        var uid = localStorage.getItem('print_access_token');
        socket.on('connect', function() {
          socket.emit('login', uid);
        });
        // 后端推送打印新订单
        socket.on('print_order', function(order_no) {

          mui.ajax(PRINT_HOST + '/Api/check_print_status', {
            data: {
              order_no: order_no

            },
            dataType: 'json', //服务器返回json格式数据
            type: 'POST', //HTTP请求类型
            timeout: 10000, //超时时间设置为10秒；
            headers: {
              'Content-Type': 'application/json'
            },

            success: function(data) {

              if (data.result == "success") {

              }
              else {
                var mac = plus.storage.getItem("device_mac");
                //var audio = document.getElementById("bgMusic");
                //播放(继续播放)
                var p = plus.audio.createPlayer('../../js/order.mp3');
                p.play(function() {
                  //alert("Audio play success!");
                }, function(e) {
                  //alert("Audio play error: " + e.message);
                });
                //打印订单
                print_order(mac, order_no);
              }
            },
            error: function(xhr, type, errorThrown) {
              console.log(JSON.stringify(xhr));
              //异常处理；
              mui.toast("网络异常，请检测网络是否正常");
            }
          })


        });

        // 后端推送重试打印失败订单
        socket.on('attempt_print_order', function(order_no) {

          mui.ajax(PRINT_HOST + '/Api/check_print_status', {
            data: {
              order_no: order_no

            },
            dataType: 'json', //服务器返回json格式数据
            type: 'POST', //HTTP请求类型
            timeout: 10000, //超时时间设置为10秒；
            headers: {
              'Content-Type': 'application/json'
            },
            success: function(data) {
              if (data.result == "success") {

              }
              else {
                var mac = plus.storage.getItem("device_mac");
                //打印订单
                print_order(mac, order_no);
              }
            },
            error: function(xhr, type, errorThrown) {
              console.log(JSON.stringify(xhr));
              //异常处理；
              mui.toast("网络异常，请检测网络是否正常");
            }
          })

        });

        // 后端推送来在线数据时
        socket.on('login_result', function(data) {
          mui.toast(data)
        });


        /************************************初始化socket_end*************************************/
      } else {
        vueself.$refs.printset.style.setProperty("display", "none");
      }

      /*****************************************************蓝牙基础类*******************************************/

      /**
       *打开蓝牙（Android）
       */
      function openAndroidBluetooth() {
        mMain = plus.android.runtimeMainActivity();
        Context = plus.android.importClass("android.content.Context");
        BManager = mMain.getSystemService(Context.BLUETOOTH_SERVICE);
        plus.android.importClass(BManager); //引入相关的method函数
        BAdapter = BManager.getAdapter();
        plus.android.importClass(BAdapter); //引入相关的method函数，这样之后才会有isEnabled函数支持
        if (!BAdapter.isEnabled()) {
          BAdapter.enable();
        }
      }

      /**
       *扫描蓝牙设备
       */
      function searchDevices() {
        //console.log("开始搜索设备");
        if (!BAdapter.isEnabled()) {
          plus.nativeUI.toast('请先打开蓝牙');
          return;
        }
        plus.nativeUI.showWaiting('正在搜索设备，请稍后...', {
          back: 'close' // 可取值"none"表示截获处理返回键，但不做任何响应；"close"表示截获处理返回键并关闭等待框；"transmit"表示不截获返回键，向后传递给Webview窗口继续处理（与未显示等待框的情况一致）。
        });
        //  vlist1.innerHTML = ''; //清空容器
        //  vlist2.innerHTML = ''; //清空容器
        // 初始化蓝牙广播接收器
        initReceiver();
        // 开启搜索
        BAdapter.startDiscovery();
        // 初始化广播信息过滤
        initIntentFilter();
      }

      function initReceiver() {
        BluetoothDevice = plus.android.importClass("android.bluetooth.BluetoothDevice");
        var bdevice = new BluetoothDevice();
        receiver = plus.android.implements('io.dcloud.android.content.BroadcastReceiver', {
          onReceive: function(context, intent) { //实现onReceiver回调函数
            plus.android.importClass(intent); //通过intent实例引入intent类，方便以后的‘.’操作
            //console.log(intent.getAction()); //获取action

            if (intent.getAction() == "android.bluetooth.adapter.action.DISCOVERY_FINISHED") {
              mMain.unregisterReceiver(receiver); //取消监听
              //console.log("搜索结束")
              plus.nativeUI.closeWaiting();
            } else {
              BleDevice = intent.getParcelableExtra(BluetoothDevice.EXTRA_DEVICE);
              //                      console.log(JSON.stringify(BluetoothDevice));
              //                      console.log(JSON.stringify(BleDevice));
              //判断是否配对
              if (BleDevice.getBondState() == bdevice.BOND_NONE) {
                //console.log("未配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());
                //if (!document.getElementById(BleDevice.getAddress())) { //判断防止重复添加
                //  var li1 = genLi(BleDevice);
                //vlist1.appendChild(li1);
                // }
              } else {
                // if (!document.getElementById(BleDevice.getAddress())) { //判断防止重复添加
                //console.log("已配对蓝牙设备：" + BleDevice.getName() + '    ' + BleDevice.getAddress());
                //   var li2 = genLi(BleDevice);
                //   vlist2.appendChild(li2);
                //  }
              }
            }
          }
        });
      }

      function initIntentFilter() {
        // 设置广播信息过滤
        var IntentFilter = plus.android.importClass('android.content.IntentFilter');
        var filter = new IntentFilter();
        filter.addAction(BluetoothDevice.ACTION_FOUND);
        filter.addAction(BAdapter.ACTION_DISCOVERY_STARTED);
        filter.addAction(BAdapter.ACTION_DISCOVERY_FINISHED);
        filter.addAction(BAdapter.ACTION_STATE_CHANGED);
        // 注册广播接收器，接收并处理搜索结果
        mMain.registerReceiver(receiver, filter);
      }

      /**
       * 获取已配对的蓝牙设备列表
       */
      function getConnectedDevices() {
        //          var main = plus.android.runtimeMainActivity();
        //          var BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
        //          var BAdapter = BluetoothAdapter.getDefaultAdapter(); //获得本机蓝牙适配器
        if (!BAdapter.isEnabled()) {
          plus.nativeUI.toast('请先打开蓝牙');
          return;
        }
        var lists = BAdapter.getBondedDevices(); //获取配对的设备列表
        plus.android.importClass(lists);
        var iterator = lists.iterator();
        plus.android.importClass(iterator);
        //   var vlist2 = document.getElementById('list2'); //注册容器用来显示未配对设备
        while (iterator.hasNext()) {
          var d = iterator.next();
          plus.android.importClass(d);
          //    var li2 = genLi(d);
          //    vlist2.appendChild(li2);
        }
      }

      //配对设备
      function connect(mac_address) {
        // 查找蓝牙设备
        var unConnected = BAdapter.getRemoteDevice(mac_address);
        if (unConnected) {
          try {
            if (BleDevice.createBond()) { //配对命令.createBond()
              //console.log("配对成功");
              mui.toast('配对成功');
            }
          } catch (e) {

            mui.toast('连接到设备失败');
          }
        }
      }


      //mac_address:打印机的mac地址
      function print_order(mac_address, order_no) {
        //	var bleObj = new ConnectPrinter(mac_address);
        //	bleObj.gotoPrint('dsds');

        /*var device = null,
              BAdapter = null,
              BluetoothAdapter = null,
              uuid = null,
              main = null,
              bluetoothSocket = null;*/
        console.log('start print');
        if (!mac_address) {
          mui.toast('请选择蓝牙打印机');
          return;
        }

        /*var mDevice = null,
              BAdapter = null,
              BluetoothAdapter = null,
              mUUID = null,
              BluetoothSocket = null,
              mMain = null;*/
        if (mDevice == null) {

          //mMain = plus.android.runtimeMainActivity();
          //BluetoothAdapter = plus.android.importClass("android.bluetooth.BluetoothAdapter");
          //BAdapter = BluetoothAdapter.getDefaultAdapter();
          //	BAdapter.cancelDiscovery(); //停止扫描
          UUID = plus.android.importClass("java.util.UUID");
          mUUID = UUID.fromString("00001101-0000-1000-8000-00805F9B34FB");
          mDevice = BAdapter.getRemoteDevice(mac_address);
          plus.android.importClass(mDevice);
          BluetoothSocket = mDevice.createInsecureRfcommSocketToServiceRecord(mUUID);
          console.log(JSON.stringify(BluetoothSocket));
        }
        plus.android.importClass(BluetoothSocket);
        if (!BluetoothSocket.isConnected()) {
          console.log('检测到设备未连接，尝试连接....');
          try {
            BluetoothSocket.connect();
          } catch (e) {
            console.log('打印机连接超时')
            //mui.toast('打印机连接超时');
            //更新订单打印状态为失败
            mui.ajax(PRINT_HOST + '/Api/update_print_status', {
              data: {
                access_token: localStorage.getItem('print_access_token'),
                order_no: order_no,
                print_status: 'error',
                printer_mac: mac_address,
                error_msg: '打印机连接超时'
              },
              dataType: 'json', //服务器返回json格式数据
              type: 'POST', //HTTP请求类型
              timeout: 10000, //超时时间设置为10秒；
              headers: {
                'Content-Type': 'application/json'
              },
              success: function(data) {
                console.log(data.result);
                if (data.result == "success") {
                  return;
                } else {
                  return;
                }
              },
              error: function(xhr, type, errorThrown) {
                //异常处理；
                //mui.toast("网络异常，请检测网络是否正常");
              }
            })
            return;

          }
        }

        // 防止蓝牙未完成连接时调用打印
        CommonUtil.WaitFor(
          function() { // 等待条件
            return BluetoothSocket.isConnected();
          },
          function() { // 回调方法
            if (!BluetoothSocket.isConnected()) {
              plus.nativeUI.toast('请连接打印机');
              return;
            } else {

              mui.post(HOST + '/Api/get_print_info', {
                access_token: localStorage.getItem('access_token'),
                order_no: order_no
              }, function(data) {
                //alert(JSON.stringify(data));
                if (data.result == 'success') {
                  var goods = data.goods;
                  PrintUtil.init(BluetoothSocket);
                  PrintUtil.OutputStream.write[0x1D, 0x4C, 0x00, 0x00];
                  //alert(data);
                  //alert(JSON.stringify(data));
                  console.log(JSON.stringify(data));
                  var printStr = data.title + '\r\n';
                  PrintUtil.PrintString(printStr);
                  //下划线
                  PrintUtil.PrintString('-----------------------------');

                  // 打印字符串
                  PrintUtil.PrintString('订单时间：' + data.order_time + '\r\n');
                  PrintUtil.PrintString('订单号码：' + data.order_no + '\r\n');
                  PrintUtil.PrintString('购买人名:' + data.member_name + '\r\n');
                  PrintUtil.PrintString('购买电话:' + data.receiver_phone + '\r\n');
                  PrintUtil.PrintString('购买地址:' + data.receiver_address + '\r\n');
                  //下划线\n
                  //PrintUtil.Underline();

                  //PrintUtil.OutputStream.write([0x1B, 0x61, 1]);
                  PrintUtil.PrintString('-----------------------------');
                  //PrintUtil.PrintString(PrintUtil.printThreeData("项目", "数量", "金额\n"))
                  PrintUtil.PrintString('商品\t\t');
                  PrintUtil.PrintString('数量\t');
                  PrintUtil.PrintString('金额\r\n');
                  goods.forEach(function(v) {
                    PrintUtil.PrintString(v.goods_name + '\t');
                    PrintUtil.PrintString(v.total_num + '\t');
                    PrintUtil.PrintString(v.total_fee);
                    PrintUtil.PrintString('\r\n');
                  })

                  //下划线
                  PrintUtil.PrintString('-----------------------------');
                  //PrintUtil.OutputStream.write([0x1B, 0x65, 2]); //

                  PrintUtil.PrintString('总金额：' + data.total_fee + '\n\n\n\n\n');
                  //下划线

                  //PrintUtil.CutPage();
                  // 结束打印
                  PrintUtil.End();

                  //更新订单打印状态为成功
                  mui.ajax(PRINT_HOST + '/Api/update_print_status', {
                    data: {
                      access_token: localStorage.getItem('print_access_token'),
                      order_no: order_no,
                      print_status: 'success',
                      printer_mac: mac_address,
                      error_msg: '打印成功'
                    },
                    dataType: 'json', //服务器返回json格式数据
                    type: 'POST', //HTTP请求类型
                    timeout: 10000, //超时时间设置为10秒；
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    success: function(data) {
                      if (data.result == "success") {

                      } else {

                      }
                    },
                    error: function(xhr, type, errorThrown) {
                      //异常处理；
                      //mui.toast("网络异常，请检测网络是否正常");
                    }
                  })

                } else {

                  //更新订单打印状态为失败
                  mui.ajax(PRINT_HOST + '/Api/update_print_status', {
                    data: {
                      access_token: localStorage.getItem('print_access_token'),
                      order_no: order_no,
                      print_status: 'error',
                      printer_mac: mac_address,
                      error_msg: data.message
                    },
                    dataType: 'json', //服务器返回json格式数据
                    type: 'POST', //HTTP请求类型
                    timeout: 10000, //超时时间设置为10秒；
                    headers: {
                      'Content-Type': 'application/json'
                    },
                    success: function(data) {
                      if (data.result == "success") {

                      } else {

                      }
                    },
                    error: function(xhr, type, errorThrown) {
                      //异常处理；
                      //mui.toast("网络异常，请检测网络是否正常");
                    }
                  })

                }
              }, 'json');

            }
          }, 1000);
      }


      //点击选择打印机事件
      mui("#diva").on("tap", "#a", function() {
        mui.openWindow({
          url: './set_printer.html',
          id: 'printer'
        })
      })


    });


    //获取店铺信息
    let token = localStorage.getItem("access_token");
    axios.post(HOST + "/Shop/index", { "access_token": token }).then((res) => {
      res = res.data
      if (res.result == 'success') {
        this.shopObj = res.data
        this.shopInfo = res.data.shop_info
        this.shopStatus = res.data.shop_info.open_status == 'y' ? true : false
        this.shopStatusStr = res.data.shop_info.open_status == 'y' ? '营业中' : '休息中'
      } else {
        Toast({
          message: res.message,
          position: 'bottom',
          duration: '2000'
        })
      }
    })

    this.initScroll();

  },
  methods: {
    changeStatus() {
      let token = localStorage.getItem("access_token");
      let status = this.shopStatus == true ? 'y' : 'n'
      axios.post(HOST + "/Shop/update_status", { "access_token": token, "open_status": status }).then((res) => {
        res = res.data
        if (res.result == 'success') {
          this.shopStatus = !this.shopStatus
          if (this.shopStatus) {
            this.shopStatusStr = '营业中'
          } else {
            this.shopStatusStr = '休息中'
          }
        } else {
          Toast({
            message: res.message,
            position: 'bottom',
            duration: '2000'
          })
        }
      })
    },
    toexit() {
      exit();
      window.location.href = "login.html"
      //this.$router.push({ path: '/login' })
    },
    searchCW() {
      let token = localStorage.getItem("access_token");
      let start = this.startdate;
      let end = this.enddate;
      if (start != '' && end != '') {
        axios.post(HOST + "/Shop/finance", {
          "access_token": token,
          "start_time": start,
          "end_time": end
        }).then((res) => {
          res = res.data
          if (res.result == 'success') {
            this.zMoney = res.data.fee
          }
        })
      } else {
        Toast({
          message: '查询时间不能为空',
          position: 'bottom',
          duration: 2000
        });
      }

    },
    showCalendar(style) {
      this.status = style;
      this.calendarShow = true;
    },
    selectedHandler(date) {
      this.calendarShow = false;
      if (this.status == 1) {
        this.startdate = date;
      } else {
        this.enddate = date
      }
    },
    initScroll() {
      if (this.contentScroll) {
        this.contentScroll.refresh();
      } else {
        this.contentScroll = new BScroll(this.$refs.askWrapper, {
          probeType: 3,
          click: true
        });
      }
      this.contentScroll.on('scroll', (pos) => {
        this.scrollY = Math.abs(Math.round(pos.y));

        //console.log("====scrollY" + this.scrollY)
      });
      this.contentScroll.on('touchend', (pos) => {
        // 下拉动作
        if (pos.y > 50) {
          //console.log('xiala')
        }
      });
      this.contentScroll.on('scrollEnd', () => {
        // 滚动到底部
        if (this.contentScroll.y <= (this.contentScroll.maxScrollY + 50)) {
          //console.log('shang')
          //this.loadData();
        }
      })
    },

  },
  components: {
    selectPicker,
    Calendar
  }

}
</script>

<style lang="stylus">
  .mar-top15
    margin-top: 15px

  hr
    margin: 0
    color: #ccc
    background: #ccc

  .shop
    background: #f2f2f2
    height: 100%
    width: 100%
    position: absolute
    top: 0
    left: 0
    .wrapper
      width: 100%
      height: 60%
      .content
        margin-bottom: 100px
        .item
          background: #fff
          margin-top: 2px
          color: #333
          .mint-cell
            min-height 40px
        .caiwu
          background: #fff
          margin-top: 2px
          color: #333
          .mint-cell
            border-bottom: 1px solid #f1f1f1
          .select-date
            padding: 10px
            p
              font-size: 15px
              line-height: 35px
              border-bottom: 1px solid #f1f1f1
            .date
              height: 25px
              font-size: 14px
          button
            height: 30px
            width: 80%
            margin-left: 10%
            margin-bottom: 10px
          .p-je
            line-height: 35px
            margin: 0 10px
            border-top: 1px solid #f1f1f1
            span
              float: right
              font-size: 18px
              color: #f00
              font-weight: 700
        .shop-data
          margin-top: 100px
          .data-detail
            background: #fff
            border-top: 1px solid #f1f1f1
            display: flex
          .data-cell
            flex: 1
            text-align: center
            margin: 15px 0
            &:last-child
              border-right: none
            h1
              font-size: 14px
              margin-bottom: 8px
            span
              font-size: 16px
              color: #333
              font-weight: 700
            p
              font-size: 12px
              margin-top: 10px
              color: #696969
    .dengc
      padding: 20px 10px
      bottom: 50px
      .mint-button
        width: 100%

    .header
      position: fixed
      top: 0
      left: 0
      width: 100%
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1)
      background-color: #108ee9
      z-index: 8
      color: #666
      display: flex
      padding: 25px
      .h-img-div
        flex: 0 0 55px
        img
          width: 50px
          height: 50px
      .shop-info
        flex: 1
        margin-left: 20px
        color: #fff
        h1
          margin: 10px 0
        a
          font-size: 12px
          color: #d8d8d8
        span
          font-size: 12px
          background: rgba(255, 255, 255, 0.2)
          padding: 5px 25px
          position: absolute
          top: 60px
          right: 30px
          border-radius: 15px

</style>
